<template>
  <div>
<<<<<<< HEAD
    <div>
      <div class="explains">
        <h4>操作说明</h4>
        <p>* 该功能主要用于设置公司内部员工的角色，以及对应的权限。</p>
      </div>
      <div class="add">
        <el-button
          class="add_s"
          type="primary"
          icon="el-icon-plus"
          @click="add"
          >新增</el-button
        >
      </div>
      <div style="overflow: hidden; margin-top: 1%">
        <el-table :data="arr" stripe style="width: 100%">
          <el-table-column prop="id" label="序号" width="80"> </el-table-column>
          <el-table-column prop="rolename_name" label="角色名称" width="100">
          </el-table-column>
          <el-table-column prop="Rper" width="1100" label="角色权限">
          </el-table-column>
          <el-table-column prop="operation" label="操作"> </el-table-column>
        </el-table>
      </div>
=======
    <div class="Jsgl">
      <h4 style="margin-left: 1%;">操作说明:</h4>
      <p class="Jsgl_p">* 该功能主要用于设置公司内部员工的角色，以及对应的权限。</p>
    </div>
    <div class="add">
      <el-button
        class="add_s"
        type="primary"
        icon="el-icon-plus"
        @click="dialogVisible = true"
        >新增</el-button
      >
    </div>
    <div style="overflow: hidden; margin-top: 1%">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="Snum" label="序号" width="80"> </el-table-column>
        <el-table-column prop="Rname" label="角色名称" width="100">
        </el-table-column>
        <el-table-column prop="Rper" width="1100" label="角色权限">
        </el-table-column>
        <el-table-column prop="oper" label="操作"> </el-table-column>
      </el-table>
    </div>
>>>>>>> d94b9af8a7cad897306a8cba085e691f29bffd7c

      <!-- 点击添加后的对话框 -->
      <el-dialog title="新增角色" :visible.sync="dialogFormVisible" width="700px">
        <el-form :model="form">
          <el-form-item label="角色名称：" :label-width="formLabelWidth">
            <el-input v-model="form.rolename_name" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="角色权限：" :label-width="formLabelWidth" trigger="click">
            
            <el-dropdown class="xlcd" :hide-on-click="false" trigger="click">
              <span class="el-dropdown-link">用户管理<i class="el-icon-arrow-down el-icon--right"></i></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-checkbox v-model="checked">用户管理</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="checked">角色管理</el-checkbox>      
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <el-dropdown class="xlcd" :hide-on-click="false" trigger="click">
              <span class="el-dropdown-link">项目管理<i class="el-icon-arrow-down el-icon--right"></i></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-checkbox v-model="checked">项目列表</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="checked">班级管理</el-checkbox>      
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <el-dropdown class="xlcd" :hide-on-click="false" trigger="click">
              <span class="el-dropdown-link">菜单管理<i class="el-icon-arrow-down el-icon--right"></i></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-checkbox v-model="checked">菜单管理</el-checkbox>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            
            <el-dropdown class="xlcd" :hide-on-click="false" trigger="click">
              <span class="el-dropdown-link">课程管理<i class="el-icon-arrow-down el-icon--right"></i></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-checkbox v-model="checked">课程管理</el-checkbox>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <el-dropdown class="xlcd" :hide-on-click="false" trigger="click">
              <span class="el-dropdown-link">学生管理<i class="el-icon-arrow-down el-icon--right"></i></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-checkbox v-model="checked">学生查询</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="checked">成绩查询</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="checked">千分制查询</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="checked">成绩录入</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="checked">千分制录入</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="checked">获奖管理</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="checked">成绩分组</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="checked">千分制规则</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="checked">作品展示</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="checked">展示分组</el-checkbox>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <el-dropdown class="xlcd" :hide-on-click="false" trigger="click">
              <span class="el-dropdown-link">日志管理<i class="el-icon-arrow-down el-icon--right"></i></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-checkbox v-model="checked">日志列表</el-checkbox>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <el-dropdown class="xlcd" :hide-on-click="false" trigger="click">
              <span class="el-dropdown-link">审核管理<i class="el-icon-arrow-down el-icon--right"></i></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-checkbox v-model="checked">千分制审核</el-checkbox>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <el-dropdown class="xlcd" :hide-on-click="false" trigger="click">
              <span class="el-dropdown-link">消息管理<i class="el-icon-arrow-down el-icon--right"></i></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-checkbox v-model="checked">消息列表</el-checkbox>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
 
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="determine">确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        rolename_name:""
      },
      tableData: [],
      dialogFormVisible : false,
      input: "",
      arr: [],
      checked: true,
      formLabelWidth: '90px'
    };
  },
  methods: {
    jiahaigangsb() {
      this.$http.get("/api/getstudent").then((res) => {
        this.arr = res.data;
        console.log(res.data)
        console.log(1422225522)
        console.log(this.arr)
      });
    },
    add() {
      this.dialogFormVisible  = true;
    },

    // 取消
    cancel(){
      this.dialogFormVisible = false;
      // 清空input值
      this.form.name = ""
    },
    // 确定
    determine(){
      this.$http.post(`/api/postmenutotal`).then((res)=>{
        console.log(res.data);
        if(res.data.code === 2000){
          this.tableData = res.data.data
        }
      })
    }

  },


  created() {
    this.jiahaigangsb();
  },
  
};
</script>

<style scoped>
.Jsgl {
    height: 50px;
    border: 1px #dcdcdc solid;
    border-radius: 12px;
    box-shadow: 2px 2px 2px #c4c3c3;
    background: whitesmoke;
    margin-left: 4%;
    margin-top: 1%;
}
.Jsgl_p{
  font-size: 12px;
  padding-left: 1%;
  padding-top: 0.5%;
}
.add_s {
  margin-top: 15px;
  margin-left: 1%;
}
.Rna {
  width: 500px;
  margin-left: 20px;
}
.jsqx {
  margin-top: 20px;
}
.xlcd {
  margin-right: 50px;
  margin-left: 15px;
}
</style>